.search-bar-container {
  background-color: var(--color-fill-top-nav);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  height: fit-content;
  max-height: 90vh;
  overflow-y: hidden;

  &.expanded {
    padding-bottom: 10px;
  }

  .search-input-container {
    align-items: center;
    display: flex;
    position: relative;
    width: 100%;

    label {
      align-items: center;
      color: var(--color-text-accent);
      cursor: pointer;
      display: flex;
      font-weight: var(--font-weight-semibold);
      transition: all 250ms ease-in-out;
      width: 100%;
    }

    .input-text {
      background-color: transparent;
      border: none;
      border-radius: 6px;
      color: var(--color-text-primary);
      font-size: var(--font-size-body1);
      font-weight: var(--font-weight-semibold);
      height: 100%;
      outline: none;
      width: 100%;

      &:focus {
        outline: none;
      }
    }

    .close-icon {
      padding: 0 15px 0 0;
    }

    .search-icon,
    .close-icon {
      color: var(--color-text-accent);
      vertical-align: middle;
    }
  }

  .search-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    width: 100%;

    .loading-wrapper {
      align-items: center;
      display: flex;
      height: 100%;
      justify-content: center;
      width: 100%;
    }

    .warning-message {
      align-self: center;
      color: var(--color-text-primary);
      display: flex;
      font-size: 14px;
      justify-self: center;
    }

    ul {
      list-style: circle;
      padding: 0 var(--space-24) 0 var(--space-32);

      li {
        color: var(--color-text-primary);
        display: list-item;
        margin: 0;
        padding: 5px 0;

        &:hover {
          font-weight: bold;
        }

        > a {
          display: block;
          text-decoration: none;
          text-overflow: ellipsis;

          span {
            text-transform: capitalize;
          }

          code {
            border-radius: 0.3rem;
            font-weight: var(--font-weight-light);
            padding: 0 6px;
          }
        }
      }
    }
  }
}

:global(.light) {
  .search-content ul li > a > code {
    background-color: var(--black2);
    color: var(--black9);
  }
}

:global(.dark) {
  .search-content ul li > a > code {
    background-color: var(--black9);
    color: var(--black2);
  }
}
